<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-1">
            <div class="grid-cont-right">
              <div class="grid-num">{{ userCount }}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-2">
            <div class="grid-cont-right">
              <div class="grid-num">{{ itemSaleCount }}</div>
              <div>商品销量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-4">
            <div class="grid-cont-right">
              <div class="grid-num">{{ orderCount }}</div>
              <div>订单数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <h3 style="margin-bottom: 20px">用户性别比例</h3>
        <div class="cav-info" style="background-color: white">
          <ve-pie :data="sexRatio" :theme="optionSex"></ve-pie>
        </div>
      </el-col>
      <el-col :span="12">
        <h3 style="margin-bottom: 20px">商品类型分布</h3>
        <div class="cav-info" style="background-color: white">
          <ve-histogram :data="typeRatio" :theme="optionType"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { SPACE, selectCount } from '../api/baseApi'
import { findSaleCount, findTypeRatio, findSexRatio } from '../api/otherApi'
export default {
  data () {
    return {
      userCount: 0,
      itemSaleCount: 0,
      orderCount: 0,
      // 用户性别比例
      sexRatio: {
        columns: ['col', 'total'],
        rows: [
          { col: '男', total: 20 },
          { col: '女', total: 30 }
        ]
      },
      optionSex: {
        color: ['#87cefa', '#ffc0cb']
      },
      // 商品类型分布
      typeRatio: {
        columns: ['col', 'total'],
        rows: [
          { col: '家电', total: 10 },
          { col: '服饰', total: 20 },
          { col: '数码', total: 30 },
          { col: '生活', total: 40 }
        ]
      },
      optionType: {
        color: ['#99FFFF']
      }
    }
  },
  mounted() {
    this.getSaleCount()
    this.getOrderCount()
    this.getTypeRatio()
    this.getUserCount()
    this.getSexRatio()
  },
  methods: {
    // 商品销量
    async getSaleCount() {
      findSaleCount().then(res => {
        console.log('商品销量: ' + JSON.stringify(res))
        this.itemSaleCount = res.state === 200 ? res.data : 0
      })
    },
    // 订单总数
    async getOrderCount() {
      selectCount(SPACE.order).then(res => {
        console.log('订单总数: ' + JSON.stringify(res))
        this.orderCount = res.state === 200 ? res.data : 0
      })
    },
    // 类别分布
    async getTypeRatio() {
      findTypeRatio().then(res => {
        console.log('类别分布: ' + JSON.stringify(res))
        if (res.state === 200) this.typeRatio.rows = res.data
      })
    },
    // 用户总数
    async getUserCount() {
      selectCount(SPACE.user).then(res => {
        console.log('用户总数: ' + JSON.stringify(res))
        this.userCount = res.state === 200 ? res.data : 0
      })
    },
    // 性别比例
    async getSexRatio() {
      findSexRatio().then(res => {
        console.log('性别比例: ' + JSON.stringify(res))
        if (res.state === 200) this.sexRatio.rows = res.data
      })
    }
  }
}
</script>

<style>
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.cav-info {
  border-radius: 6px;
  overflow: hidden;
}
</style>
